import { Route, NavLink, Link, Switch, Redirect } from 'react-router-dom'
import FindMusic from './pages/FindMusic'
import MyMusic from './pages/MyMusic'
import MyFollow from './pages/MyFollow'
import NotFound from './pages/NotFound'

export default function App() {
  return (
    <>
      <nav className='navbar navbar-expand-lg navbar-light bg-light'>
        <div className='container'>
          <Link className='navbar-brand' to='/'>
            网易云
          </Link>
          <button
            className='navbar-toggler'
            type='button'
            data-bs-toggle='collapse'
            data-bs-target='#navbarSupportedContent'
            aria-controls='navbarSupportedContent'
            aria-expanded='false'
            aria-label='Toggle navigation'
          >
            <span className='navbar-toggler-icon'></span>
          </button>
          <div className='collapse navbar-collapse' id='navbarSupportedContent'>
            <ul className='navbar-nav me-auto mb-2 mb-lg-0'>
              <li className='nav-item'>
                {/* //!#2 通过 Link 组件指定入口，配合 to 属性进行跳转，同时 # 去掉 */}
                {/* to="/" 表示“以斜杠开头的就会被匹配” */}
                {/* exact 表示精确匹配，只有访问 / 的时候，才会被添加高亮的 class */}
                <NavLink
                  className='nav-link'
                  aria-current='page'
                  to='/findmusic'
                >
                  发现音乐
                </NavLink>
              </li>
              <li className='nav-item'>
                {/* /mymusic ok */}
                {/* /mymusic/a ok */}
                {/* /mymusic/b ok */}
                {/* /mymusicaa error */}
                <NavLink className='nav-link' aria-current='page' to='/mymusic'>
                  我的音乐
                </NavLink>
              </li>
              <li className='nav-item'>
                <NavLink
                  className='nav-link'
                  aria-current='page'
                  to='/myfollow'
                >
                  关注
                </NavLink>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <div className='container mt-3'>
        <div className='card'>
          <div className='card-body'>
            <Switch>
              {/* 期望从 / 进来的时候，跳转到 /findmusic */}
              {/* from / 表示也是以 / 开头的就会被命中 */}
              <Redirect exact from='/' to='/findmusic' />
              {/* //!#3 指定出口 */}
              {/* path => 表示“以 / 开头”的就会被匹配 */}
              {/* exact 表示精确匹配，必须是 / 才被被匹配 */}
              <Route path='/findmusic' component={FindMusic} />
              {/* 以 /mymusic 开头才会被匹配 */}
              <Route path='/mymusic' component={MyMusic} />
              <Route path='/myfollow' component={MyFollow} />
              {/* 不加 path 永远会被匹配 */}
              <Route component={NotFound} />
            </Switch>
          </div>
        </div>
      </div>
    </>
  )
}
